<template>
	<view class="my_container">
		<CustomNavbarTwo :title="pageTitle" />
		<view class="my_container_body">
			<view class="my_container_body_head"></view>
			<view class="my_container_body_body">
				<view class="background-view-image">
					<u-swiper @click="handleDetail" keyName="content" imgMode="scaleToFill" height="240rpx"
						:list="bannerList" indicator indicatorMode="line" circular radius="24rpx"></u-swiper>
				</view>
				<view class="body_button">
					<view class="body_button_left" :class="active === '1' ? 'button_active' : ''" @click="change('1')">
						废纸</view>
					<view class="body_button_right" :class="active === '2' ? 'button_active' : ''" @click="change('2')">
						废塑</view>
				</view>
				<view class="body_item">
					<view class="list_wrap">
						<scroll-view style="height: 100%" :scroll-y="true" @scrolltolower="handleScroll">
							<view @tap="goDetail(item)" v-for="(item, index) in classList" :key="index"
								class="item_card">
								<image class="item_image" mode="aspectFill" :src="item.fileListPic[0].fileUrl"></image>
								<view class="item_right">
									<view class="item_info">
										{{ item.title }}
									</view>
									<view class="two">{{ item.contentInfo }}</view>
									<view class="three">
										<view class="time">
											<image class="date_image" src="../../static/images/time.png"></image>
											{{ item.pubTime }}
										</view>
									</view>
									<view class="fo">
										<view class="th">
											<image class="date_image" src="../../static/images/view.png"></image>
											<view class="date">{{ item.viewCount }}</view>
										</view>
										<view class="th">
											<image class="date_image" src="../../static/images/message.png"></image>
											<view class="date">{{ item.commentCount }}</view>
										</view>
										<view @tap.stop="handleCollect(item, index)" class="th">
											<image v-if="item.likeFlag == 0" class="date_image"
												src="../../static/images/collect.png"></image>
											<image v-else class="date_image" src="../../static/images/like1.png">
											</image>
											<view class="date">{{ item.likeCount }}</view>
										</view>
										<view class="th four">
											<image class="b-img" src="../../static/images/zhaunfa.png"></image>
											<button class="share-btn" @tap="handShareCountAdd(item, index)"
												open-type="share" @tap.stop>
												分享{{ item.shareCount == null ? 0 : item.shareCount }}
											</button>
										</view>
									</view>
								</view>
							</view>
							<uni-load-more :status="status"></uni-load-more>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import CustomNavbarTwo from '@/components/CustomNavbarTwo.vue';
	import { mapState } from 'vuex'; // 关键导入
	const api = require('../../util/api.js');
	export default {
		components: { CustomNavbarTwo },
		data() {
			return {
				pageTitle: '合作专区',
				shareTile: '',
				showSex: false,
				active: '1',
				feizhiList: [],
				status: 'more',
				tempList: [],
				triggered: false,
				type: '1',
				pageNum: 1,
				pageSize: 10,
				total: 30,
				show: true,
				classList: [],
				bannerList: []
			};
		},
		onLoad() {
			this.pageNum = 1;
			//this.feizhiList = []
			this.getDataList();
			this.getBannerList();
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ['shareAppMessage', 'shareTimeline']
			});
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {
				// 来自页面内分享按钮
				console.log(res.target);
			}
			return {
				title: '找纸塑网一废纸废塑料AI获客平台', //分享的名称
				path: '/pages/hangqingzixun/index',
				mpId: 'wx312947ac8d5e65e9' //此处配置微信小程序的AppId
			};
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '找纸塑网一废纸废塑料AI获客平台', //分享的名称
				path: '/pages/hangqingzixun/index',
				mpId: 'wx312947ac8d5e65e9' //此处配置微信小程序的AppId
			};
		},
		computed: {
			...mapState(['userInfo', 'pubInfoUserInfo'])
		},
		methods: {
			//点击轮播图
			handleDetail(e) {
				console.log(e, 666);
				if (this.bannerList[e].clickUrl) {
					uni.navigateTo({
						url: `/page/detail/index?id=${this.bannerList[e].clickUrl}`
					});
				}
			},
			//增加分享次数
			handShareCountAdd(item, index) {
				this.shareTile = item.title;
				this.$https.post(this.$api.getShareCountAdd, {
					courseDetailId: item.id
				}).then((res) => {
					if (res.code === 200) {
						this.classList[index].shareCount++;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			//获取轮播图
			getBannerList() {
				this.$https.post(this.$api.getBannerList, {
					bannerType: '13'
				}).then((res) => {
					if (res.code === 200) {
						this.bannerList = res.data;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			//点赞
			handleCollect(item, index) {
				if (!this.userInfo.userId) {
					return uni.navigateTo({
						url: '/pages/index/index'
					});
				}
				this.$https.post(this.$api.getCourseLike, {
					pubInfoId: item.id,
					operateType: 3,
					processType: item.likeFlag == 0 ? 1 : 0
				}).then((res) => {
					if (res.code === 200) {
						if (item.likeFlag == 0) {
							this.classList[index].likeFlag = '1';
							this.classList[index].likeCount++;
						} else {
							this.classList[index].likeFlag = '0';
							this.classList[index].likeCount;
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			change(index) {
				this.pageNum = 1;
				this.classList = [];
				this.active = index;
				this.type = index;
				this.getDataList();
			},
			handleScroll(e) {
				if (this.status == 'no-more') {
					return;
				} else {
					this.status = 'loading';
					this.pageNum++;
					this.getDataList();
				}
			},
			getDataList() {
				var requestData = {
					resourceType: 5,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					product2: this.type
				};
				this.dataList = [];
				this.$https.post(this.$api.getClassList, requestData).then((res) => {
					uni.hideLoading();
					if (res.code === 200) {
						this.total = res.total;
						this.classList = [...this.classList, ...res.data];
						if (res.data.length == 0 || res.total <= 10) {
							this.status = 'no-more';
						} else {
							this.status = 'more';
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			goDetail(item) {
				uni.navigateTo({
					url: `/page/hangqingzixun/detail?id=${item.id}&title=${item.title}`
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.my_container {
		width: 100%;
		height: 100%;
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
		font-style: normal;
		text-transform: none;

		.share-btn {
			font-size: 20rpx;
			width: 60rpx;
		}

		.my_container_body {
			width: 750rpx;
			background: linear-gradient(180deg, #ddffde 0%, #f7f7f7 29%, #f7f7f7 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			height: 100%;

			.my_container_body_head {
				width: 686rpx;
				height: 176rpx;
			}

			.my_container_body_body {
				height: calc(100% - 176rpx);
				width: 686rpx;
				padding-top: 20rpx;
				margin-left: 32rpx;

				.background-view-image {
					width: 686rpx;
					height: 240rpx;

					image {
						border-radius: 24rpx 24rpx 24rpx 24rpx;
					}
				}

				.body_button {
					margin-top: 36rpx;
					width: 686rpx;
					height: 90rpx;
					display: flex;
					display: flex;
					justify-content: space-between;
					font-weight: 500;
					font-size: 28rpx;
					text-align: center;
					line-height: 90rpx;

					.body_button_left {
						width: 330rpx;
						height: 90rpx;
						background: #ffffff;
						color: #333333;
						border-radius: 84rpx 84rpx 84rpx 84rpx;
					}

					.body_button_right {
						width: 330rpx;
						height: 90rpx;
						background: #ffffff;
						color: #333333;
						border-radius: 84rpx 84rpx 84rpx 84rpx;
					}

					.button_active {
						background: #1ee825 !important;
						color: #ffffff !important;
					}
				}

				.body_item {
					height: calc(100% - 380rpx);

					.list_wrap {
						height: 100%;

						.item_card {
							margin-top: 20rpx;
							width: 686rpx;
							height: 250rpx;
							background: #ffffff;
							border-radius: 24rpx;
							display: flex;

							.item_image {
								width: 200rpx;
								height: 220rpx;
								border-radius: 20rpx 20rpx 20rpx 20rpx;
								margin-top: 20rpx;
								margin-left: 20rpx;
							}

							.item_right {
								margin-left: 24rpx;
								margin-top: 24rpx;
								width: 430rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-around;

								.item_info {
									height: 40rpx;
									font-weight: 550;
									font-size: 28rpx;
									color: #333333;
									line-height: 39rpx;
									text-align: left;
								}

								.two {
									font-weight: 400;
									font-size: 24rpx;
									color: #777777;
									line-height: 34rpx;
									margin-top: 12rpx;
									overflow: hidden;
									/* 确保超出部分的文本会被隐藏 */
									text-overflow: ellipsis;
									/* 超出部分显示省略号 */
									display: -webkit-box;
									/* 使用弹性盒子模型 */
									-webkit-line-clamp: 2;
									/* 限制显示两行 */
									-webkit-box-orient: vertical;
									/* 垂直排列子元素 */
								}

								.three {
									display: flex;
									justify-content: space-between;
									font-size: 24rpx;
									color: #777777;

									.time {
										display: flex;
										align-items: center;

										.date_image {
											width: 36rpx;
											height: 36rpx;
											margin-top: 8.5rpx;
										}
									}

									.address {
										display: flex;
										align-items: center;

										.date_image {
											width: 36rpx;
											height: 36rpx;
											margin-top: 8.5rpx;
										}
									}
								}

								.fo {
									width: 432rpx;
									height: 53rpx;
									line-height: 53rpx;
									display: flex;

									.tr {
										width: 180rpx;
										height: 53rpx;
										line-height: 53rpx;
										font-weight: 400;
										font-size: 24rpx;
										color: #777777;
									}

									.th {
										width: 116rpx;
										height: 53rpx;
										line-height: 53rpx;
										display: flex;

										.date_image {
											width: 36rpx;
											height: 36rpx;
											margin-top: 8.5rpx;
										}

										.date {
											height: 53rpx;
											font-weight: 400;
											font-size: 24rpx;
											color: #777777;
											line-height: 53rpx;
											text-align: left;
											margin-left: 10rpx;
										}
									}

									.four {
										width: 140rpx;
										position: relative;
										display: flex;
										align-items: center;

										.b-img {
											width: 40rpx;
											height: 40rpx;
										}

										.share-btn {
											width: 100%;
											background-color: transparent;
											padding-left: 40rpx;
											position: absolute;
											font-size: 22rpx;
											top: 0;
											text-align: left;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>